<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .app{width: 300px;height: 300px;background: pink;}
        .app1{width: 100px;height: 100px;background: #fff;}
    </style>
</head>
<body>
    <div class="box">
        <!-- 点击完按钮,网页会跳转页面,form标签action属性的作用，
            有默认行为 -->
        <form action="http://www.atguigu.com">
            <button @click.prevent="show">点击提交</button>
        </form>


        <div class="app" @click.stop="show1">
            <div class="app1" @click.stop="show1">阻止事件传播</div>
        </div>


        <button @click.once="show2">只执行一次</button>
    </div>
</body>
</html>
<script>
    const VM = new Vue({
        el:'.box',
        methods:{
            show(e){
                // 阻止默认行为
                // e.preventDefault()
                alert('1111111')
            },
            show1(e){
                // 阻止事件传播
                // e.stopPropagation()
                alert('22222222')
            },
            show2(){
                alert('333333333')
            }
        }

    })
</script>


<!--  修饰:prevent->阻止默认事件 -->
<!-- stop:修饰符，可以阻止事件的传播 -->
<!-- 修饰符:once,修饰只会让事件触发一次 -->



         <!-- 
             注意:修饰符可以进行链式语法,谁先谁后无所谓，这种出现情况比较是少
             这些语法都是支持的，只不过项目、工作当中基础没有这种写法！！！！
             @click.stop.prevent.once
             @click.once.prevent.stop
             @click.prevent.stop.once
          -->